<template>
  <div class="summary-content">
    <PartitionTitle type="line" fontSize="1rem">
      <span>{{ queryParams.produceDate }}</span>
    </PartitionTitle>
    <div class="content">
      <div class="left">
        <leftContent :data="option"></leftContent>
      </div>

      <img
        class="arrow"
        src="@/assets/images/analysis/arrow.png"
        alt=""
        srcset=""
      />

      <div class="center">
        <TableForm
          ref="TableForm1"
          rowKey="equipId"
          :srouceTableData="srouceTableData1"
          :columns="columns1"
          :singleSelect="true"
          :showIntersectionTip="false"
          @select-change="handleSelectChange"
        ></TableForm>
      </div>

      <img
        class="arrow"
        src="@/assets/images/analysis/arrow.png"
        alt=""
        srcset=""
      />

      <div class="right">
        <TableForm
          ref="TableForm2"
          :srouceTableData="srouceTableData2"
          :columns="columns2"
          :showIntersectionTip="false"
        ></TableForm>
      </div>
    </div>
  </div>
</template>
<script>
import TableForm from "@/components/TableForm";
import leftContent from "./leftContent";
import TreeIcon1 from "@/assets/images/analysis/tree-icon1.png";
import TreeIcon2 from "@/assets/images/analysis/tree-icon2.png";
import TreeIcon3 from "@/assets/images/analysis/tree-icon3.png";
import { columns1, columns2 } from "./table";
import { getDayDataDetailOfDay } from "@/api/reportFormAnalysis/failureRate";
export default {
  components: { TableForm, leftContent },
  props: {
    queryParams: {
      type: Object,
      default: null,
    },
    // 横坐标默认选中值
    defaultxAxisActive: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      // 图表配置
      option: [
        {
          label: "计划停机时长：",
          value: "",
          icon: TreeIcon1,
          children: [
            {
              label: "保养时长：",
              value: "",
            },
            {
              label: "换型时长：",
              value: "",
            },
          ],
        },
        {
          label: "生产时长：",
          value: "",
          icon: TreeIcon2,
          children: [
            {
              label: "产线停机时长：",
              value: "",
              icon: TreeIcon3,
              className: "warning-item",
            },
          ],
        },
      ],
      // 故障设备表格列配置
      columns1,
      // 故障设备表格数据
      srouceTableData1: [],
      // 故障设备停机时间表格列配置
      columns2,
      // 故障设备停机时间表格数据
      srouceTableData2: [],
    };
  },
  methods: {
    async getChartData() {
      try {
        const params = {
          ...this.queryParams,
        };
        const res = await getDayDataDetailOfDay(params);

        // 计划停机时长
        this.option[0].value = this.getTimeString(res.data.planOffMinutes);
        // 保养时长
        this.option[0].children[0].value = this.getTimeString(
          res.data.planMaintainMinutes
        );
        // 换型时长
        this.option[0].children[1].value = this.getTimeString(
          res.data.planShiftoverMinutes
        );
        // 生产时长
        this.option[1].value = this.getTimeString(res.data.produceMinutes);
        // 产线停机时长
        this.option[1].children[0].value = this.getTimeString(
          res.data.abnormalStopMinutes
        );

        // 设备列表
        this.srouceTableData1 = res.data.sumEquipStopVos || [];
        this.srouceTableData2 = [];

        // 默认选中第一行
        // 优先选中配置的值：defaultxAxisActive
        this.$nextTick(() => {
          if (this.srouceTableData1.length > 0) {
            let defaultSelected = this.srouceTableData1[0];

            if (this.defaultxAxisActive) {
              const rowItem = this.srouceTableData1.find(
                (ele) => ele.equipId == this.defaultxAxisActive
              );
              if (rowItem) {
                defaultSelected = rowItem;
              }
            }

            this.$refs.TableForm1.setActiveRow(defaultSelected.equipId);
            this.handleSelectChange([defaultSelected]);
          }
        });
      } catch (error) {
        // 计划停机时长
        this.option[0].value = "";
        // 保养时长
        this.option[0].children[0].value = "";
        // 换型时长
        this.option[0].children[1].value = "";
        // 生产时长
        this.option[1].value = "";
        // 产线停机时长
        this.option[1].children[0].value = "";

        this.srouceTableData1 = [];
        this.srouceTableData2 = [];

        console.error(error);
      }
    },
    getTimeString(minutes) {
      if (typeof minutes != "number") {
        return "";
      }

      if (minutes == 0) {
        return "0小时";
      }

      const _minutes = this.toFix(minutes);

      let hourStr = Math.floor(_minutes / 60);
      let minStr = this.toFix(_minutes % 60, 0);

      return `${hourStr > 0 ? hourStr + "小时 " : ""}${
        minStr > 0 ? minStr + "分钟" : ""
      }`;
    },
    handleSelectChange(selection) {
      if (!selection?.length) {
        return;
      }
      this.srouceTableData2 = selection[0].equipAbStopVos || [];
    },
  },
  watch: {
    queryParams: {
      handler(newVal) {
        if (!newVal) {
          return;
        }
        this.getChartData();
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.summary-content {
  width: 100%;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  .content {
    width: 100%;
    flex: 1;
    position: relative;
    .arrow {
      position: absolute;
      top: 50%;
      width: 18px;
      transform: translate(-50%, -50%);
    }
    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 22%;
      height: 100%;
      border-radius: 4px;
      border: 1px solid #e9ebf1;
      padding: 16px 16px 0;
      overflow-y: auto;
      font-size: 14px;
      & ~ .arrow {
        left: 23%;
      }
    }
    .center {
      position: absolute;
      left: 24%;
      top: 0;
      width: 26%;
      height: 100%;
      padding: 16px;
      border-radius: 4px;
      border: 1px solid #e9ebf1;

      & ~ .arrow {
        left: 51%;
      }
    }
    .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 48%;
      height: 100%;
      padding: 16px;
      border-radius: 4px;
      border: 1px solid #e9ebf1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background-color: #ffffff;
      .custom-table-container {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2005;
}
::v-deep .warning-item {
  border: 2px solid rgb(245 78 30);
  box-shadow: 0 0 2px 1px rgb(245 78 30);
}
</style>
